<template>
    <div style="background-color: #35495E;width: 100%;height: 100vh">
        <div class="login-container">
            <div class="avatar"><img src="../assets/QQ图片20210814225710.png"></div>
            <div class="login-box">
                <div class="box1"><label>登录名称</label> <input type="text" v-model="form.username"/></div>
                <dix class="box2"><label>登录密码</label> <input type="text" v-model="form.password"/></dix>
                <div class="btn">
                    <el-button style="position: relative;left: -50px" @click="reset" size="small" type="success">重置
                    </el-button>
                    <el-button style="position: relative;left: -40px" @click="login" size="small" type="primary">登录
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import '../assets/login.css';
    import axios from 'axios'

    // import from '../assets/login.css'
    export default {
        created() {
            // localStorage.removeItem('token')
        }
        , name: "Login",
        methods: {
            reset() {
                console.log(11)
                console.log(this.form)
                this.form = ""
            },
            login() {
                axios.post('http://localhost:9090/user/login', this.form).then(res => {
                    console.log(res)
                    if (res.data.code === "0") {
                        this.$message({
                            type: 'success',
                            message: '登录成功'
                        })
                        localStorage.setItem('token', res.data.data)

                        this.$router.push('/user')
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        })
                    }
                })
            }
        },
        data() {
            return {
                form: {}
            }
        }
    }
</script>

<style scoped>

</style>